import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Input, Select } from 'antd';
import { observer } from 'mobx-react';

import RbProTable, { RbProTableStore } from '@components/RbProTable';
import { Content } from '@components/Page';

import {
  COMMON_REQUIRE_RULE,
  COMMON_SELECT_FIELDSNAMES,
  COMPLETELY_FILL_STYLE
} from '@utils/config';

import { getProcCategoryApi } from '@services/service';
import { TableAlignType } from '@/enumTypes/table';
import Button from '@components/Button';
import request from '@utils/request';
import notification from '@utils/notification';

const store = new RbProTableStore();
const ProcessModel: FC = () => {
  /** 流程分类数据*/
  const [procCategoryData, setProcCategoryData] = useState<any[]>([]);

  /** 查询表格数据 */
  const handleQueryData = useCallback((params: any) => {
    getProcCategoryApi(params)
      .then((res: any) => {
        if (res && res.records) {
          setProcCategoryData(
            res.records.map((record: any) => ({
              value: record.id,
              option: record.name
            }))
          );
        }
      })
      .finally(() => {});
  }, []);

  useEffect(() => {
    handleQueryData({});
  }, [handleQueryData]);

  const designModel = useCallback(() => {
    console.log('...');
  }, []);

  /** 发布流程设计*/
  const deployModel = useCallback(() => {
    if (!store.selectedKeys.length) return;
    console.log(store.selectedKeys);
    request({
      url: `/flowable/model/deploy/${store.selectedKeys}`,
      method: 'POST'
    }).then(async (res: any) => {
      if (res) {
        notification.success();
        await store.query();
      }
    });
  }, []);

  /** 查询条配置列表 */
  const queryFromItems = useMemo(
    () => [
      {
        name: 'key',
        label: '模型编码',
        children: <Input />
      },
      {
        name: 'name',
        label: '模型名称',
        children: <Input />
      },
      {
        name: 'category',
        label: '流程分类',
        children: (
          <Select
            allowClear
            style={COMPLETELY_FILL_STYLE}
            fieldNames={COMMON_SELECT_FIELDSNAMES}
            options={procCategoryData}
          />
        )
      }
    ],
    [procCategoryData]
  );

  /** 表格列配置 */
  const columns = useMemo(
    () => [
      {
        title: '模型编码',
        dataIndex: 'key',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '模型名称',
        dataIndex: 'name',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '版本',
        dataIndex: 'rev',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '流程分类',
        dataIndex: 'processCategoryName',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '备注',
        dataIndex: 'description',
        ellipsis: true,
        width: 280
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      },
      {
        title: '修改时间',
        dataIndex: 'lastUpdateTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      }
    ],
    []
  );

  /** 新增表单配置 */
  const addFormItems = useMemo(
    () => [
      {
        name: 'key',
        label: '模型编码',
        rules: [COMMON_REQUIRE_RULE],
        children: <Input />
      },
      {
        name: 'name',
        label: '模型名称',
        children: <Input />
      },
      {
        name: 'category',
        label: '流程分类',
        rules: [COMMON_REQUIRE_RULE],
        children: (
          <Select
            style={COMPLETELY_FILL_STYLE}
            fieldNames={COMMON_SELECT_FIELDSNAMES}
            options={procCategoryData}
          />
        )
      },
      {
        name: 'description',
        label: '备注',
        children: <Input.TextArea />
      }
    ],
    [procCategoryData]
  );

  /** 编辑表单配置 */
  const updateFormItems = useMemo(
    () => [
      {
        name: 'key',
        label: '模型编码',
        rules: [COMMON_REQUIRE_RULE],
        children: <Input />
      },
      {
        name: 'name',
        label: '模型名称',
        children: <Input />
      },
      {
        name: 'category',
        label: '流程分类',
        rules: [COMMON_REQUIRE_RULE],
        children: (
          <Select
            style={COMPLETELY_FILL_STYLE}
            fieldNames={COMMON_SELECT_FIELDSNAMES}
            options={procCategoryData}
          />
        )
      },
      {
        name: 'description',
        label: '备注',
        children: <Input.TextArea />
      }
    ],
    [procCategoryData]
  );

  return (
    <Content>
      <RbProTable
        rowKey="id"
        columns={columns}
        store={store}
        actionUrl="/flowable/model"
        sticky
        selectionType
        queryConfig={{
          queryFromItems,
          queryFormat: true
        }}
        addConfig={{
          addFormItems
        }}
        updateConfig={{ updateFormItems }}
        toolBarRender={() => [
          'add',
          'update',
          'delete',
          <Button
            key="designModel"
            type="primary"
            disabled={!store.selected.length}
            onClick={() => designModel()}
          >
            设计
          </Button>,
          <Button
            key="deployModel"
            type="primary"
            disabled={!store.selected.length}
            onClick={() => deployModel()}
          >
            发布
          </Button>
        ]}
      />
    </Content>
  );
};

export default observer(ProcessModel);
